<template>
    <!-- 商品详情页 -->
    <div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkerd">
            <van-swipe-item v-for="item in gallery" :key="item.id"><img :src="item.img_url" alt="" width="100%"></van-swipe-item>
        </van-swipe>
        <!-- Tips组件 -->
        <Tips />
        <!-- 产品信息渲染和展示弹出层 -->
        <div class="info">
            <h3>{{info.name}}</h3>
            <p>{{info.goods_brief}}</p>
            <div>{{info.retail_price | RMBFormat}}</div>
        </div>
        <van-cell title="展示弹出层" is-link @click="isShowSku=true"/>
        <!-- 商品参数 -->
        <div class="attribute">
            <h4>商品参数</h4>
            <ul>
                <li v-for="(item, index) in attribute" :key="index">
                    <span>{{item.name}}</span>
                    <section class="van-ellipsis">{{item.value}}</section>
                </li>
            </ul>
        </div>
        <!-- 产品详情图片 -->
        <div class="goods_desc" v-html="info.goods_desc"></div>
        <!-- 常见问题 -->
        <div class="title">
            <span>常见问题</span>
        </div>
        <ul class="issue">
            <li v-for="item in issue" :key="item.id">
                <h3>{{item.question}}</h3>
                <p>{{item.answer}}</p>
            </li>
        </ul>
        <!-- 相关产品 -->
        <div class="title">
            <span>相关产品</span>
        </div>
        <Products  :goodsList="goodsList"/>

        <!-- 商品导航 （底部加入购物车）-->
        <AppGoodsAction  
            @changeIsShowSku="addToCart"
            :goodsCount="goodsCount"
        />

        <!-- Sku组件 商品规格-->
        <!-- ref标签属性   $refs对象 -->
        <van-sku
            ref="sku"
            v-model="isShowSku"
            :sku="sku"
            :goods="goods"
            :hide-stock="sku.hide_stock"
        />
    </div>
</template>

<script>
    import {GetGoodsDetail, GetGoodsRelated, GetCartNum, ToAddCart} from "../request/api.js"
    import Tips from "../components/Tips.vue"
    import Products from "../components/Products.vue"
    import AppGoodsAction from "../components/AppGoodsAction.vue"
    export default {
        components:{
            Tips,Products,AppGoodsAction
        },
        data(){
            return{
                // Sku 的数据
                isShowSku:false,
                sku:{
                    tree:[],
                    hide_stock: false, // 是否隐藏剩余库存
                    price: '1.00', // 默认价格（单位元）
                    stock_num: 227, // 商品总库存
                },
                goods: {
                    // 默认商品 sku 缩略图
                    picture: ''
                },
                // 购物车商品数量
                goodsCount:"",
                
                //---------------------------
                //轮播图数据
                gallery:[],
                // 渲染详情页时候的数据
                info:{},
                attribute:[],
                issue:[],
                goodsList:[],
                
                //productList数据
                productList:[]
            }
        },
        methods:{
            addToCart(){
                //先判断用户有没有登录，没有登录就跳转到/user界面
                // let token = localStorage.getItem("token")
                // if(!token){
                //     //提示 请先登录
                //     this.$toast("请先登录！");
                //     setTimeout(()=>{
                //         this.$router.push("/user")
                //     },1000)
                //     return
                // }
                // 调用utils
                let ret = this.utils.mustBeLogin()
                if(!ret)return;
                
                
                //已登录
                // 点击了  “加入购物车” 按钮 执行这里代码
                // 需要先判断sku是否展示，如果展示了，才能真正执行加入购物车的操作。 如果没有展示，就展示sku
                if(this.isShowSku){
                    // 真正执行加入购物车的操作
                    // 获取用户选择的商品的数量，这个数据在sku对象中获取
                    let counts = this.$refs.sku.getSkuData().selectedNum;
    
                    ToAddCart({
                        goodsId:this.$route.query.id,
                        productId:this.productList[0].id,
                        number:counts
                    }).then(res=>{
                        console.log(res.data.cartTotal.goodsCount);
                        // 更新购物车数量的数据
                        this.goodsCount = res.data.cartTotal.goodsCount;
                        this.$toast.success("添加成功!");
    
                    })
                }
    
                this.isShowSku = !this.isShowSku
            }
        },
        created() {
            // console.log(this.$route);
            //请求商品详情信息
            GetGoodsDetail({
                id:this.$route.query.id
            }).then(res=>{
                console.log(res.data)
                 // 详情页展示数据
                this.gallery = res.data.gallery
                this.info = res.data.info;
                this.attribute = res.data.attribute;
                this.issue=res.data.issue;
                
                // Sku数据处理
                // 商品缩略图
                this.goods.picture = this.info.list_pic_url;
                // 商品价格
                this.sku.price = this.info.retail_price;
                // 商品库存
                this.sku.stock_num = this.info.goods_number;
    
                //productList数组
                this.productList = res.data.productList
            })
            
            // 请求相关商品
            GetGoodsRelated({
                id:this.$route.query.id
            }).then(res=>{
                this.goodsList = res.data.goodsList
            })
    
            // 获取购物车商品数量
            GetCartNum().then(res=>{
                console.log("获取购物车商品数量", res.data.cartTotal.goodsCount);
                this.goodsCount = res.data.cartTotal.goodsCount
            })
        }
    }
</script>

<style lang = "less" scoped>
.detailPage{
    padding-bottom: .5rem;
}
.info{
    background: #fff;
    text-align: center;
    padding: .2rem 0;
    h3{
        font-weight: normal;
        font-size: .2rem;
        line-height: .5rem;
    }
    p{
        color: #999;
        font-size: .14rem;
        line-height: .3rem;
    }
    div{
        color: darkred;
        font-size: .14rem;
        line-height: .3rem;
    }
}
.attribute{
    margin-top: .2rem;
    background: #fff;
    padding: .2rem 4%;
    h4{
        font-weight: normal;
        font-size: .16rem;
        margin-bottom: 0.2rem;
    }
    ul{
        li{
            background: #efefef;
            line-height: .4rem;
            height: .4rem;
            margin-bottom: .1rem;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            span{
                width: 30%;
                text-align: right;
            }
            section{
                flex: 1;
                padding-left: .2rem;
            }
        }
    }
}
/* 如果样式无法替换，可以试试/deep/ 深度样式写法 */
/deep/.goods_desc{
    img{max-width:100%; display: block;}
}
.title {
  width: 100%;
  background: #fff;
  height: 0.5rem;
  position: relative;
  &::before {
    content: "";
    width: 50%;
    height: 2px;
    background: #ccc;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -25%;
  }
  span {
    width: 30%;
    position: relative;
    background: #fff;
    display: block;
    text-align: center;
    margin: 0 auto;
    height: 0.5rem;
    line-height: 0.5rem;
  }
}
.issue {
  padding: 0 4%;
  background: #fff;
  li {
    h3 {
      height: 0.3rem;
      line-height: 0.3rem;
      padding-left: 0.2rem;
      position: relative;
      font-weight: normal;
      &::before {
        content: "";
        width: 4px;
        height: 4px;
        background: darkred;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -2px;
      }
    }
    p {
      font-size: 0.12rem;
      line-height: 0.2rem;
      padding-left: 0.2rem;
    }
  }
}
.van-sku-container{
    min-height:auto;
    
}
/deep/.van-sku-messages{
    padding: 0;
}
/deep/.van-sku__stepper-title,/deep/.van-sku__stepper{
    float: none;
}

</style>
